<template>
  <div class="wrap">
    <CHeader content="企业人员定位报警管理" />
    <div class="box">
      <el-radio-group
        v-model="filter.address"
        style="margin-bottom: 30px"
      >
        <el-radio-button
          v-for="(item, index) in regionArray"
          :key="index"
          :label="item.label"
        >{{ item.name }}</el-radio-button>
      </el-radio-group>
      <div
        class="bodyContainer"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <div class="bodyTop">
          <div class="tips">
            开展的作业数：<span>{{result.workNum}}</span>
          </div>
          <div
            class="work"
            v-for="(item,index) in workArray"
            :key="index"
          >
            <img :src="item.src" />
            <div class="info">
              <div class="num">{{item.num}}</div>
              <div class="name">{{item.name}}</div>
            </div>
          </div>
        </div>
        <div class="filter"> 筛选区域 区块</div>
        <CardTable
          @more="log"
          :data="tableData"
          :showHeader="false"
          :pageOption.sync="pageOption"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import CHeader from "@/components/Cheader/Cheader";
import CardTable from "@/components/cardTable/cardTable";

export default {
  name: 'qyrydwglbjgl',
  components: {
    CHeader,
    CardTable,
  },
  watch: {
    filter: {
      handler () {
        this.init();
      },
      deep: true,
    },
  },
  data () {
    return {
      loading: true,
      regionArray: [
        // 全市 盐化新区 洪泽区 盱眙县 涟水县 金湖县 淮阴区 清江浦区
        { name: "全市", label: "all" },
        { name: "盐化新区", label: "yxxq" },
        { name: "洪泽区", label: "hzq" },
        { name: "盱眙县", label: "xyx" },
        { name: "涟水县", label: "lsx" },
        { name: "金湖县", label: "jhx" },
        { name: "淮阴区", label: "hyq" },
        { name: "清江浦区", label: "qjpq" },
      ],
      // 过滤器
      filter: {
        address: "all",
      },
      workArray: [
        {
          num: 0,
          name: '动火',
          src: require('@/assets/images/enterprisePersonnelPositionAlarmManagement/1.png')
        },
        {
          num: 0,
          name: '登高',
          src: require('@/assets/images/enterprisePersonnelPositionAlarmManagement/2.png')
        },
        {
          num: 0,
          name: '临时用电',
          src: require('@/assets/images/enterprisePersonnelPositionAlarmManagement/3.png')
        },
        {
          num: 0,
          name: '受限空间',
          src: require('@/assets/images/enterprisePersonnelPositionAlarmManagement/4.png')
        },
        {
          num: 0,
          name: '吊装',
          src: require('@/assets/images/enterprisePersonnelPositionAlarmManagement/5.png')
        },
        {
          num: 0,
          name: '动土',
          src: require('@/assets/images/enterprisePersonnelPositionAlarmManagement/6.png')
        },
        {
          num: 0,
          name: '断路',
          src: require('@/assets/images/enterprisePersonnelPositionAlarmManagement/7.png')
        },
        {
          num: 0,
          name: '盲板',
          src: require('@/assets/images/enterprisePersonnelPositionAlarmManagement/8.png')
        },
      ],
      pageOption: {
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
        layout: "sizes, prev, pager, next, jumper",
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      result: {
        // 作业数
        workNum: 0,
      },
      tableData: [],
    }
  },
  methods: {
    log: console.log,
    initFilter () {
      Object.keys(this.filter).forEach(key => {
        if (this.$route.query[key]) {
          this.filter[key] = this.$route.query[key]
        }
      });
    },
    init () {
      this.loading = true;
      setTimeout(() => {

        this.getTableData(true);
        this.loading = false;
      }, 1000);
    },
    getTableData (retry = false) {
      this.tableData = [];
      setTimeout(() => {
        this.tableData = [
          {
            // 企业名称
            enterpriseName: "江苏华丰能源科技发展有限公司",
            // 报警内容
            alarmContent: "焦化一分厂焦炉区域6号装没车点位发现隐患楼梯台阶变形",
            // 报警时间
            alarmTime: "2022-07-22 08:20:46",
            // 消警时间
            alarmEndTime: "2022-07-22 09:20:46",
            // 消警人
            alarmEndPerson: "张三",
            // 消警说明
            alarmEndExplain: "进行现场核实，违规行为是更换作业规范时抄近路",
          },
          {
            enterpriseName: "江苏华丰能源科技发展有限公司",
            alarmContent: "焦化一分厂焦炉区点位发现隐患",
            alarmTime: "2022-07-22 08:20:46",
            alarmEndTime: "2022-07-22 09:20:46",
            alarmEndPerson: "张小图",
            alarmEndExplain: "已消警",
          },
        ];
        if (retry) {
          this.pageOption.currentPage = 1;
          this.pageOption.total = Math.floor(Math.random() * 1000);
        }
        for (
          let index = this.tableData.length;
          index < this.pageOption.pageSize;
          index++
        ) {
          this.tableData.push(this.tableData[1]);
        }
      }, 1000);
    },
    sizeChange (val) {
      this.pageOption.pageSize = val;
      this.getTableData();
    },
    currentChange (val) {
      this.pageOption.currentPage = val;
      this.getTableData();
    },
  },
  mounted () {
    Object.keys(this.$route.query).length > 0 && this.initFilter();
    this.init();
  },
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  min-height: 100%;
  text-align: left;
  background-color: rgb(243, 245, 251);
  .header_wrap {
    background-color: #fff;
    border-bottom: 1px solid #e0eaf5;
  }
  .box {
    padding: 20px 0 0;
    max-width: 100%;
    .el-radio-group {
      padding: 0 20px;
    }
    :deep .el-radio-button {
      .el-radio-button__inner {
        max-height: 36px;
        padding: 6px 20px;
        line-height: 24px;
        font-size: 16px;
        font-weight: 400;
      }
      &.is-active .el-radio-button__inner {
        background-color: #5184ea;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          bottom: -10px;
          left: 50%;
          border-top: 5px solid #5184ea;
          border-left: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-right: 5px solid transparent;
        }
      }
    }
    .bodyContainer {
      min-height: 30vh;
      padding: 0 32px;
      background: #fdffff;
      .bodyTop {
        height: 100px;
        display: flex;
        align-items: center;
        .tips {
          width: 266px;
          height: 60px;
          background: #e7f1fd;
          border-radius: 6px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          font-family: Arial;
          font-weight: 400;
          color: #5d6c8e;
          line-height: 60px;
          span {
            color: #364064;
            font-weight: 600;
          }
        }
        .work {
          display: flex;
          align-items: center;
          margin: 0 10px;
          img {
            width: 60px;
            height: 60px;
          }
          .info {
            min-width: 60px;
            padding: 10px;
            font-family: Microsoft YaHei;
            color: #5d6c8e;
            .num {
              font-size: 20px;
              font-weight: 600;
            }
            .name {
              font-size: 16px;
              font-weight: 400;
              color: #5d6c8e;
              line-height: 23px;
            }
          }
        }
      }
    }
  }
}
</style>